<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <title>学习时长</title>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script> 
	<script type="text/javascript" src="js/dateRange.js"></script>
	<link rel="stylesheet"  media="screen" href="dateRange.css"/> 
    <link rel="stylesheet" href="css/base/ck_base.css" media="screen">
    <link rel="stylesheet" href="css/user/ck_user2.css" media="screen">
    <style type="text/css">
::selection {
	background-color: #E13300;
	color: white;
}
::moz-selection {
	background-color: #E13300;
	color: white;
}
::webkit-selection {
	background-color: #E13300;
	color: white;
}
body {
	background-color: #fff;
	margin: 40px;
	font: 12px     /20px normal Helvetica, Arial, sans-serif;
	color: #4F5155;
}
a {
	color: #003399;
	background-color: transparent;
	font-weight: normal;
}
input {
	color: #333333;
	font: 12px /1.5 Tahoma, Helvetica, 'SimSun', sans-serif;
}
code {
	font-family: Consolas, Monaco, Courier New, Courier, monospace;
	font-size: 12px;
	background-color: #f9f9f9;
	border: 1px solid #D0D0D0;
	color: #002166;
	display: block;
	margin: 14px 0 14px 0;
	padding: 12px 10px 12px 10px;
}
h1 {
	color: #444;
	background-color: transparent;
	border-bottom: 1px solid #D0D0D0;
	font-size: 19px;
	font-weight: normal;
	margin: 0 0 14px 0;
	padding: 14px 15px 10px 15px;
}
.wrapper {
	margin: 0 15px 0 15px;
}

        .practiceView {
            width: 1190px;
            margin: 0 auto;
        }

        .statisticsView {
            border: 1px solid #ccc;
            background: #fff;
            padding: 25px 40px;
            font-size: 14px;
            padding-bottom: 100px;
            height: 600px;
            overflow: auto;
            border-top: 0px;
        }

        .practiceTitle {
            font-size: 24px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-weight: 500;
        }

        .goDetailButton {
            width: 200px;
            height: 44px;
            margin-top: 5px;
            text-align: center;
            line-height: 44px;
            margin: 0 auto;
            color: white;
            background-color: #00b7ee;
            cursor: pointer;
            margin-top: 50px;
        }

        .caret {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 2px;
            vertical-align: middle;
            border-top: 4px dashed;
            border-top: 4px solid;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }

        .showRange {
            font-family: "microsoft yahei";
            float: right;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
        }

        .statisticsNav{
            height: 45px;
            border-bottom: 1px solid gainsboro;
        }
        .user_tab1 .active{
            border-color: #1989fa !important;
        }
        .user_tab1 li.active a{
          color: #1989fa;
        }
        .timePickView{
            width: 300px;
            height: 180px;
            box-sizing: border-box;
            border: 1px solid gainsboro;
            background-image: url("img2/timePick.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
            position: absolute;
            z-index: 23;
            margin-top: 45px;
            margin-left: 808px;
        }
        #questionChartPractice{
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div class="practiceView">
    <div class="mcTitle clearfix">
        <ul class="user_tab1 fl">
            <li><a href="">我的课程</a></li>
            <li><a href="">直播日历</a></li>
            <li class="curr"><a href="">学习时长</a></li>
        </ul>
    </div>
    <div class="statisticsView">
        <div class="statisticsNav">
            <div class="showRange"><div class="ta_date" id="div_date1">
				<span class="date_title" id="date1"></span>
				<a class="opt_sel" id="input_trigger1" href="#">
					<i class="i_orderd"></i>
				</a>
			</div>
		<script type="text/javascript">
			//var STATS_START_TIME = '1329148800';
			var dateRange1 = new pickerDateRange('date1', {
				isTodayValid : true,
				startDate : '2016-08-1',
				endDate : '2016-09-1',
				needCompare : false,
				defaultText : ' 至 ',
				autoSubmit : true,
				inputTrigger : 'input_trigger1',
				theme : 'ta',
				success : function(obj) {
					$("#dCon2").html('开始时间 : ' + obj.startDate + '<br/>结束时间 : ' + obj.endDate);
				}
			});

		</script>            </div>
            <ul class="user_tab1">
                <li class="active"><a href="">总时长</a></li>
                <li><a href="">课程统计</a></li>
            </ul>
        </div>
        <div class="practiceTitle">

        </div>
        <div id="questionChartPractice"></div>
        <!--<div class="goDetailButton">查看详情</div>-->
    </div>
</div>
<script type="text/javascript">
    $('#questionChartPractice').highcharts({
        chart: {
            type: 'column',
            margin: [50, 50, 90, 80],
            backgroundColor: "white",
            animation: Highcharts.svg
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['8月1号', '8月2号', '8月3号', '8月4号'],
            labels: {
                rotation: 0,
                align: 'right',
                style: {
                    fontSize: '14px',
                    fontFamily: 'microsoft yahei,Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: '时长（分钟）'
            },
            allowDecimals: false
        },
        tooltip: {
            pointFormat: '{point.y}分钟'
        },
        series: [
            {
                type: 'column',
                name: '分钟',
                data: [{
                    color: '#7cb5ec',
                    y: 1
                }, {
                    color: '#7cb5ec',
                    y: 5
                }, {
                    color: '#7cb5ec',
                    y: 7
                }, {
                    color: '#7cb5ec',
                    y: 10
                }]
            },
            {
                type: 'spline',
                name: '平均',
                data: [3, 2.67, 3, 6.33],
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[3],
                    fillColor: 'white'
                }
            }
        ]
    });
</script>
</body>
</html>